<template>
  <div id="myPartner">
    <el-tabs type="border-card">
      <el-tab-pane label="我的感情观">
        <el-table
        :data="myLoveViewTableData"
        stripe
        style="width: 100%">
        <el-table-column
          prop="title1"
          label="基本项"
          width="180">
        </el-table-column>
        <el-table-column
          prop="detial1"
          label="详细"
          width="180">
        </el-table-column>
        <el-table-column
          prop="title2"
          label="基本项"
          width="180">
        </el-table-column>
        <el-table-column
          prop="detial2"
          label="详细">
        </el-table-column>
        </el-table>
        <div class="mod-info">
          <el-button type="primary" @click="modViewInfo = true">修改资料</el-button>
          <el-dialog title="修改资料" :visible.sync="modViewInfo">
            <el-form :model="form">
              <el-form-item label="是否介意婚前公证财产：" :label-width="formLabelWidth">
                <el-input v-model="form.n1" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item label="消费观：" :label-width="formLabelWidth">
                <el-input v-model="form.n2" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item label="是否愿意和父母同住：" :label-width="formLabelWidth">
                <el-input v-model="form.n3" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item label="最不能忍受女方的缺点：" :label-width="formLabelWidth">
                <el-input v-model="form.n4" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item label="你是个浪漫的人吗：" :label-width="formLabelWidth">
                <el-input v-model="form.n5" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item label="是否介意她抽烟喝酒：" :label-width="formLabelWidth">
                <el-input v-model="form.n6" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item label="关注哪类照片：" :label-width="formLabelWidth">
                <el-input v-model="form.n7" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item label="婚后是否想要孩子：" :label-width="formLabelWidth">
                <el-input v-model="form.n8" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item label="你认为家务应该如何分配：" :label-width="formLabelWidth">
                <el-input v-model="form.n9" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item label="如果她为家庭的琐事唠叨你怎么办：" :label-width="formLabelWidth">
                <el-input v-model="form.n10" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item label="你对婚后家庭理财的规划：" :label-width="formLabelWidth">
                <el-input v-model="form.n11" auto-complete="off"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="modViewInfo = false">取 消</el-button>
              <el-button type="primary" @click="modViewInfo = false">确 定</el-button>
            </div>
          </el-dialog>
        </div>
      </el-tab-pane>
      <el-tab-pane label="我的择偶观">
        <br>
        <el-switch class="my-choice" v-model="choice"></el-switch>
        <span class="choice-desc">限定择偶条件</span>
        <br><br>
        <el-table
          :data="dreamPartnerTableData1"
          stripe
          style="width: 100%">
          <el-table-column
            prop="title1"
            label="外貌/个性/经验"
            width="180">
          </el-table-column>
          <el-table-column
            prop="detial1"
            label="期望"
            width="180">
          </el-table-column>
          <el-table-column
            prop="title2"
            label="外貌/个性/经验"
            width="180">
          </el-table-column>
          <el-table-column
            prop="detial2"
            label="期望">
          </el-table-column>
        </el-table>
        <div class="mod-info">
          <el-button type="primary">修改资料</el-button>
        </div>
        <br>
        <el-table
          :data="dreamPartnerTableData2"
          stripe
          style="width: 100%">
          <el-table-column
            prop="title1"
            label="家庭条件/对婚姻认识"
            width="180">
          </el-table-column>
          <el-table-column
            prop="detial1"
            label="期望"
            width="180">
          </el-table-column>
          <el-table-column
            prop="title2"
            label="家庭条件/对婚姻认识"
            width="180">
          </el-table-column>
          <el-table-column
            prop="detial2"
            label="期望">
          </el-table-column>
        </el-table>
        <div class="mod-info">
          <el-button type="primary">修改资料</el-button>
        </div>
        <br>
        <el-table
          :data="dreamPartnerTableData3"
          stripe
          style="width: 100%">
          <el-table-column
            prop="title1"
            label="约会风格"
            width="180">
          </el-table-column>
          <el-table-column
            prop="detial1"
            label="期望"
            width="180">
          </el-table-column>
          <el-table-column
            prop="title2"
            label="约会风格"
            width="180">
          </el-table-column>
          <el-table-column
            prop="detial2"
            label="期望">
          </el-table-column>
        </el-table>
        <div class="mod-info">
          <el-button type="primary">修改资料</el-button>
        </div>
        <br>
        <el-table
          :data="dreamPartnerTableData4"
          stripe
          style="width: 100%">
          <el-table-column
            prop="title1"
            label="敏感问题"
            width="180">
          </el-table-column>
          <el-table-column
            prop="detial1"
            label="期望"
            width="180">
          </el-table-column>
          <el-table-column
            prop="title2"
            label="敏感问题"
            width="180">
          </el-table-column>
          <el-table-column
            prop="detial2"
            label="期望">
          </el-table-column>
        </el-table>
        <div class="mod-info">
          <el-button type="primary">修改资料</el-button>
        </div>
        <br>
        <el-table
          :data="dreamPartnerTableData5"
          stripe
          style="width: 100%">
          <el-table-column
            prop="title1"
            label="婚后生活"
            width="180">
          </el-table-column>
          <el-table-column
            prop="detial1"
            label="期望"
            width="180">
          </el-table-column>
          <el-table-column
            prop="title2"
            label="婚后生活"
            width="180">
          </el-table-column>
          <el-table-column
            prop="detial2"
            label="期望">
          </el-table-column>
        </el-table>
        <div class="mod-info">
          <el-button type="primary">修改资料</el-button>
        </div>
        <br>
        <el-table
          :data="dreamPartnerTableData6"
          stripe
          style="width: 100%">
          <el-table-column
            prop="title1"
            label="家庭精神/生活期待"
            width="180">
          </el-table-column>
          <el-table-column
            prop="detial1"
            label="期望"
            width="180">
          </el-table-column>
          <el-table-column
            prop="title2"
            label="家庭精神/生活期待"
            width="180">
          </el-table-column>
          <el-table-column
            prop="detial2"
            label="期望">
          </el-table-column>
        </el-table>
        <div class="mod-info">
          <el-button type="primary">修改资料</el-button>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div> 
</template>

<script>
  export default {
    name: 'myPartner',
    data(){
      return{
        modViewInfo:false,
        form: {
          n1: '',
          n2: '',
          n3: '',
          n4: '',
          n5: '',
          n6: '',
          n7: '',
          n8: '',
          n9: '',
          n10: '',
          n11: '',
        },
        formLabelWidth: '120px',
        choice:false,
        myLoveViewTableData:[
        {
          title1:'是否介意婚前公证财产',
          detial1:'无所谓',
          title2:'关注哪类照片',
          detial2:'顺眼、风情、年轻',
        },
        {
          title1:'消费观',
          detial1:'有计划',
          title2:'婚后是否想要孩子',
          detial2:'是',
        },
        {
          title1:'是否愿意和父母同住',
          detial1:'否',
          title2:'你认为家务应该如何分配',
          detial2:'家庭主要收入方做较少的家务',
        },
        {
          title1:'最不能忍受女方的缺点',
          detial1:'啰嗦',
          title2:'如果她为家庭的琐事唠叨你怎么办',
          detial2:'和她协商',
        },
        {
          title1:'你是个浪漫的人吗',
          detial1:'是',
          title2:'你对婚后家庭理财的规划',
          detial2:'AA制',
        },
        {
          title1:'是否介意她抽烟喝酒',
          detial1:'否',
          title2:'',
          detial2:'',
        },
        ],
        dreamPartnerTableData1:[
        {
          title1:'外貌气质',
          detial1:'气质高雅',
          title2:'性格脾气',
          detial2:'温和体贴',
        },
        {
          title1:'语言表达风格',
          detial1:'内向讲理',
          title2:'对隐私的看法',
          detial2:'理解尊重',
        },
        {
          title1:'考虑问题',
          detial1:'体贴周到',
          title2:'性爱经验',
          detial2:'无所谓',
        },
        {
          title1:'婚前性行为的看法是',
          detial1:'顺其自然',
          title2:'',
          detial2:'',
        },
        ],
        dreamPartnerTableData2:[
        {
          title1:'家庭条件',
          detial1:'生活小康',
          title2:'家庭对结婚时可以提供的支持',
          detial2:'一般',
        },
        {
          title1:'个人财富资产状况',
          detial1:'温饱有余',
          title2:'你认为在婚姻关系当中最应该看重的情感因素依次排列应是',
          detial2:'1、浪漫 2、财富 3、陪伴 4、关爱 5、沟通6、忠诚7、理解 8、尊重 9、保持相对独立 10、保持个人空间',
        },
        {
          title1:'你认为婚姻关系中最重要的是',
          detial1:'浪漫 财富 陪伴 关爱 沟通忠诚',
          title2:'',
          detial2:'',
        },
        ],
        dreamPartnerTableData3:[
        {
          title1:'面对心仪对象',
          detial1:'巧妙暗示',
          title2:'喜欢的约会场所',
          detial2:'影院/公园/咖啡厅/茶楼',
        },
        {
          title1:'喜欢约会的美食场所',
          detial1:'馆子/火锅店',
          title2:'谁为约会买单',
          detial2:'AA制/男士买单',
        },
        {
          title1:'希望约会费用控制数额',
          detial1:'300——500元',
          title2:'希望约会的频率',
          detial2:'天天见',
        },
        {
          title1:'约会过程中对礼物的看法是',
          detial1:'彼此互赠礼物互通爱意',
          title2:'',
          detial2:'',
        },
        ],
        dreamPartnerTableData4:[
        {
          title1:'对于婚房规划',
          detial1:'男首付，双方还贷',
          title2:'婚房加名的看法',
          detial2:'婚房一定要加自己名字',
        },
        {
          title1:'介意离异的对方带有小孩吗',
          detial1:'无所谓',
          title2:'在意对方孩子的年龄大小吗',
          detial2:'希望小点利于培养感情',
        },
        {
          title1:'介意在意对方孩子的性别',
          detial1:'无所谓',
          title2:'希望对方监护的小孩性别',
          detial2:'男孩',
        },
        {
          title1:'婚前协议的看法',
          detial1:'看对方的态度',
          title2:'',
          detial2:'',
        },
        ],
        dreamPartnerTableData5:[
        {
          title1:'对家务分配的看法',
          detial1:'平均分配',
          title2:'对婚后家居环境的维护',
          detial2:'看得过去',
        },
        {
          title1:'婚后，希望和自己父母通常保持的联系方式',
          detial1:'一月至少看望父母两次',
          title2:'婚后，对个人时间和两人世界时间的分配期待',
          detial2:'尊重业余时间仍各自保有私人空间',
        },
        {
          title1:'介意对方养宠物吗',
          detial1:'无所谓',
          title2:'对于婚姻家庭理财的规划是',
          detial2:'除了必要开支，各管各',
        },
        {
          title1:'对于生育孩子的安排',
          detial1:'先过两年二人世界要 事业再上台阶后要',
          title2:'夫妻吵架，谁应该先道歉',
          detial2:'谁错谁先道歉',
        },
        ],
        dreamPartnerTableData6:[
        {
          title1:'对于公益活动的看法',
          detial1:'赞同，常常参与',
          title2:'对于兴趣爱好是否相同在婚姻中作用的看法',
          detial2:'和而不同，差异增加情趣',
        },
        {
          title1:'宗教信仰',
          detial1:'无',
          title2:'希望彼此的信仰一致吗',
          detial2:'是',
        },
        {
          title1:'对于家庭生活精神氛围的期待',
          detial1:'积极上进',
          title2:'',
          detial2:'',
        },
        ],
      }
    },
  }
  
</script>

<style scoped>
  #myPartner {
    width: 800px;
    height: 400px;
  }
  div.mod-info{
    padding: 20px;
    text-align: center;
  }
  .my-choice{
    float: right;
  }
  .choice-desc{
    float: right;
    margin-right: 7px;
    margin-top: 1px;
    color: gray;
  }
  

</style>